<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/home.css">
</head>

<body>
    <!-- 网页头部 -->
    <header class="header">
        <div class="header-content">
            <img class="logo" src="./images/logo.png" alt="">
            <div class="tool-bar">
                <a href="./login.html">登录</a>
                <a href="./register.html">注册</a>
                <div class="search-box flex-bt">
                    <input type="text" placeholder="热门搜索：干花花瓶">
                    <img src="./images/ss.png" alt="">
                </div>
                <img src="./images/gt3.png" alt="">
                <img src="./images/ewm.png" alt="">
            </div>
        </div>
    </header>
    <!-- 导航菜单 -->
    <div class="menu">
        <div class="menu-item">首页</div>
        <div class="menu-item all-products">
            所有商品
            <div class="submenu"></div>
        </div>
        <div class="menu-item">装饰摆件</div>
        <div class="menu-item">装饰摆件</div>
        <div class="menu-item">装饰摆件</div>
        <div class="menu-item">装饰摆件</div>
    </div>
    <!-- 页面左侧的三小菜单 -->
    <div class="right-menu">

        <div class="flex-center">
            <img src="./images/gt1.png" alt="">
            <div class="circle flex-center">1</div>
        </div>

        <div class="flex-center">
            <img src="./images/gt2.png" alt="">
        </div>

        <div class="flex-center">
            <img src="./images/gt3.png" alt="">
        </div>
    </div>

    <!-- 大图 -->
    <div class="banner"></div>
    <!-- 产品分类 -->
    <div class="type">
        <img class="type-item" src="./images/i1.jpg"></img>
        <img class="type-item" src="./images/i2.jpg"></img>
        <img class="type-item" src="./images/i3.jpg"></img>
    </div>
    <!-- 产品标题 -->
    <div class="title">
        <img src="./images/tit01.jpg" class="title-image"></img>
    </div>
    <!-- 产品列表 -->
    <!-- productList：小驼峰命名法 -->
    <div class="product-list" id="productList">

        <!-- <div class="list-item">
            <img class="item-image" src="./images/s12.jpg" alt="">
            <p class="item-name">【最家】不锈钢壁饰墙饰软装</p>
            <strong class="item-price">￥668</strong>
        </div> -->

    </div>
    <!-- 产品服务 -->
    <div class="service">
        <div class="service-item">
            <div class="service-icon icon1"></div>
            <span>7天无理由退货</span>
        </div>
        <div class="service-item">
            <div class="service-icon icon2"></div>
            <span>7天无理由退货</span>
        </div>
        <div class="service-item">
            <div class="service-icon icon3"></div>
            <span>7天无理由退货</span>
        </div>
        <div class="service-item last-item">
            <div class="service-icon icon4"></div>
            <span>7天无理由退货</span>
        </div>
    </div>
    <!-- 网页底部 -->
    <footer class="footer">
        <p>蜗牛家居©2019-2021公司版权所有 京ICP备080100-xx号</p>
        <p>违法和不良信息举报电话：400-800-8200，本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</p>
    </footer>

    <script src="./js/jquery-3.7.1.min.js"></script>
    <script src="./js/home.js"></script>
</body>

</html>